import React from 'react'
import { Tabs } from 'antd-mobile'
import { NavBar, Space, Toast } from 'antd-mobile'
import { Image, List } from 'antd-mobile'
function App() {

  const users = [
    {
      
      name:'阿萨德',
      avatar:'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60',
      description:'标准套餐+蓝色'
    },
    {
      name:'阿萨德',
      avatar:'https://images.unsplash.com/photo-1567945716310-4745a6b7844b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=60',
      description:'标准套餐+蓝色'
    },
    {
      name:'法人个人',
      avatar:'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80',
      description:'标准套餐+红色'
    },
    {
      name:'额规痕迹',
      avatar:'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      description:'标准套餐+紫色'
    },
  ]

  return (
    <div>
      <NavBar>我的订单</NavBar>
      <Tabs>
        <Tabs.Tab title='全部订单' key='fruits'>

          <List>
            {users.map(user => (
              <List.Item
                key={user.name}
                prefix={
                  <Image
                    src={user.avatar}
                    style={{ borderRadius: 20 }}
                    fit='cover'
                    width={40}
                    height={40}
                  />
                }
                extra={
                  <span style={{fontSize:18}}> ￥169 </span>
                }
                description={user.description}
              >
                {user.name}
              </List.Item>
            ))}
          </List>

        </Tabs.Tab>
        <Tabs.Tab title='待付款' key='vegetables'>
          西红柿
        </Tabs.Tab>
        <Tabs.Tab title='待发货' key='animals'>
          蚂蚁
        </Tabs.Tab>
        <Tabs.Tab title='待收货' key='animal'>
          蚂蚁ss
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default App
